<template>
        <div class="swiper-container swiper-actorBanner">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="actor in actorData" :key="actor.name">
      <div><img :src="actor.avatarAddress" alt=""></div>
      </div>
    </div>
    </div>

</template>


<style lang="scss" scoped>
 .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      width:1.7rem;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
    //   display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    //   .details{
    //   width:1.7rem;
    //   text-align: center;
    //   font-size: 0.24rem;
    //   }
    //   .s1{
    //       margin-top:0.2rem;
    //   }

    }
    img{
        width:1.7rem;
        height:1.6804rem;
    }


</style>


<script>
import Swiper from 'swiper'
export default {
    methods:{
        getActBanner(){
    var swiper = new Swiper('.swiper-actorBanner', {
      slidesPerView: 4,
      spaceBetween: 30,
                  freeMode: true

    })
        }
    },
    mounted()
    {
        this.getActBanner()
    },
    props:['actorData']
}
</script>